<template>
    <div class="container">
        <div class="wrapper" >
            <div class="head">
                <img src="../assets/logo.png" alt="" class="logo">
                <div class="nav">
                    <router-link to="/cart" class="cart">购物车</router-link>
                    <div class="role">
                        <div class="tourist" v-if="!user">
                            <a @click="isLogin=!isLogin">登录</a>
                            <a @click="isRegister=!isRegister">注册</a>
                        </div>
                        <div class="user" v-if="user">
                            <div class="imgBox">
                                <img src="../assets/userimg.jpg" class="userimg">
                            </div>
                            <ul class="infoBox">
                                <router-link to="/order/all" class="infoItem" tag="li">订单管理</router-link>
                                <li class="infoItem">地址管理</li>
                                <li class="infoItem" @click="logout">退出</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <transition name="fade" mode="out-in">
            <login v-show="isLogin||isRegister" @close="close()" :isLogin="isLogin" :isRegister="isRegister"></login>
        </transition>
    </div>
</template>
<script>
import login from "../components/login"
export default {
    data(){
        return{
            isLogin:false ,
            isRegister:false,
            user:this.isUser
        }
    },
    props:['isUser'],
    components:{
        login
    },
    mounted(){
        if(localStorage.getItem("Booktoken")){
            this.user=true
        }else this.user=false
    },
    methods:{
        close(){
            this.isLogin=false;
            this.isRegister=false
        },
        logout(){
            localStorage.removeItem('Booktoken');
            this.user=false;
            location.reload();
        }
        
    }
}
</script>
<style scoped>
    .wrapper{
        width: 100%;
        background: rgba(255,255,255,0.9);
        box-shadow: 0 5px 0 rgba(0,0,0,0.04), 0 10px 10px rgba(0,0,0,0.03), 0 1px 0 rgba(0,0,0,0.05);
        position: fixed;
        z-index: 99
    }
    .head{
        width: 100%;
        height: 4em;  
    }
    .logo{
        height: 80%;
        vertical-align: middle;
        margin: .5em 2em;
    }
    .nav{
        float: right;
        height: 100%;
        margin-right: 20px;
        display: flex;
        align-items:center;
    }
    .nav a{
        cursor: pointer;
    }
    .cart,.role,.user{
        margin-right: 1em
    }
    .user:hover >.infoBox{
        display: block;
    }
    .imgBox{
        width: 3em;
        height: 3em;
        border-radius: 50%;
        overflow: hidden;
        position: relative;
    }
    .userimg{
        height: 100%;
        max-width: 100%;
    }
    .infoBox{
        display: none;
        position: absolute;
        top: 3.9em;
        width: 6em;
        margin: 0 -2em 0;
        padding: 0;
        background-color: #fff;
        border: 1px solid #DBDBDB;
        box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
        text-align: center;
    }
    .infoItem{
        list-style: none;
        line-height: 2em;
        cursor: pointer;
    }
    .infoItem:hover{
        background-color: lightgrey
    }
</style>
